<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>实时频谱 + 瀑布图</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
    <div class="controls">
        <h2>实时频谱 & 瀑布图</h2>
        <label>中心频率(MHz): <input id="centerFreq" type="number" step="0.01" value="255"></label>
        <label>带宽(MHz): <input id="bandwidth" type="number" step="0.01" value="40"></label>
        <button id="btnReset">复位视图</button>
        <button id="btnToggle">暂停</button>
        <span id="fps">FPS: 0</span>
    </div>

    <canvas id="specCanvas" height="60"></canvas>
    <canvas id="waterCanvas" height="60"></canvas>
</div>

<script type="module">
    import { initViewState, view, resetView } from './view-state.js';
    import { initCanvas, clearCanvas } from './canvas-utils.js';
    import { drawSpectrum } from './spectrum-drawer.js';
    import { drawWaterfall } from './waterfall-drawer.js';
    import { setupMouseHandlers } from './mouse-handler.js';
    import { connectWebSocket } from './main.js';

    // 初始化
    initViewState();
    const specCanvas = document.getElementById('specCanvas');
    const waterCanvas = document.getElementById('waterCanvas');
    initCanvas(specCanvas);
    initCanvas(waterCanvas);

    // 全局重绘函数
    window.redrawAll = function (latestData = null) {
        drawSpectrum(specCanvas, latestData || window.lastData);
        drawWaterfall(waterCanvas, latestData || window.lastData);
    };

    // 鼠标交互（两个画布共享同一视图状态）
    setupMouseHandlers(specCanvas);
    setupMouseHandlers(waterCanvas);

    // 控制按钮
    document.getElementById('btnReset').onclick = () => {
        resetView();
        document.getElementById('centerFreq').value = view.centerFreq;
        document.getElementById('bandwidth').value = view.bandwidth;
        redrawAll();
    };
    const btnToggle = document.getElementById('btnToggle');
    btnToggle.onclick = () => {
        window.running = !window.running;
        btnToggle.textContent = window.running ? '暂停' : '继续';
    };

    // 输入框实时更新视图参数（仅影响刻度，不发后端）
    document.getElementById('centerFreq').addEventListener('change', e => {
        view.centerFreq = parseFloat(e.target.value) || 255;
        redrawAll();
    });
    document.getElementById('bandwidth').addEventListener('change', e => {
        view.bandwidth = parseFloat(e.target.value) || 40;
        redrawAll();
    });
    // === 用户手动修改中心频率时，标记并更新视图 ===
    document.getElementById('centerFreq').addEventListener('input', (e) => {
        window.userHasChangedCenterFreq = true;               // 标记：以后不再被后端覆盖
        const val = parseFloat(e.target.value);
        if (!isNaN(val)) {
            view.centerFreq = val;                            // 实时更新 X 轴刻度
            redrawAll();
        }
    });

    // // 带宽也实时更新
    // document.getElementById('bandwidth').addEventListener('input', (e) => {
    //     const val = parseFloat(e.target.value);
    //     if (!isNaN(val) && val > 0) {
    //         view.bandwidth = val;
    //         redrawAll();
    //     }
    // });

    // 可选：如果你有“复位视图”按钮，想让它重新跟随后端频率，可以加这句
    document.getElementById('btnReset')?.addEventListener('click', () => {
        window.userHasChangedCenterFreq = false;  // 复位后重新自动跟随后端
    });
    // 用户手动改中心频率或带宽 → 以后不再被后端覆盖
    const markUserTouched = () => {
        window.userHasTouchedView = true;
        window.userHasChangedCenterFreq = true;
    }

    document.getElementById('centerFreq').addEventListener('input', markUserTouched);
    document.getElementById('bandwidth').addEventListener('input', markUserTouched);

    // 鼠标缩放（X轴或Y轴）也算手动操作
    document.addEventListener('wheel', markUserTouched, { capture: true });

    // 可选：复位按钮重新跟随后端
    document.getElementById('btnReset')?.addEventListener('click', () => {
        window.userHasTouchedView = false;
    });
    // WebSocket 连接
    connectWebSocket();
</script>
</body>
</html>